<template>
  <div>
    <el-form :model="params" ref="ruleForm" label-position="right" size="small"
      label-width="110px" class="base-search-more">
      <el-row>
        <el-col :span="6" v-if="$store.state.showAgent">
          <el-form-item label="区域">
            <agent-list style="width: 100%" :agentids="params.agentid" v-on:listenToChildEvent="getAentId" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="骑手">
            <el-input style="width: 100%" placeholder="请输入骑手姓名" v-model="params.shoppername" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="日期">
            <pt-date-picker v-model="params.date" :shortcuts="[{ text: '今天', start: 0, end: 0}, { text: '近七天', start: -7, end: 0}, {text: '近一个月', start: -30, end: 0}]" />
          </el-form-item>
        </el-col>
        <el-col :span="$store.state.showAgent? 6: 12" style="text-align: right;">
          <el-form-item label-width="0">
            <el-button @click="exportExcel()" v-loading="ExcelLoading">导出表格<i class="el-icon-download"></i></el-button>
            <el-button type="primary" icon="el-icon-search" @click="$refs.pagination.handleSizeChange(10)">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="base-table-wrap">
      <el-table :data="tableData.rows">
        <el-table-column prop="agentName" label="区域名称" min-width="160" align="left" />
        <el-table-column prop="shopper" label="配送员姓名" min-width="120" align="left">
          <template slot-scope="scope">
            <el-button type="text" @click="$refs.deliveryDetail.shopperDetails(scope.row)">{{scope.row.shopper}}</el-button>
          </template>
        </el-table-column>
      <el-table-column prop="sortName" label="荣誉等级" min-width="120" align="left" />
      <el-table-column prop="goodstotalSum" label="有效订单" min-width="120" align="right" />
      <!-- <el-table-column prop="shoppermoneySum" label="配送所得金额" min-width="160" align="right" /> -->
      <el-table-column prop="outTimeSum" label="超时完成单" min-width="120" align="right" />
      <el-table-column prop="outTimeLi" label="超时率" min-width="120" align="right" />
      <el-table-column prop="ChaPingDan" label="差评订单" min-width="120" align="right" />
      <el-table-column prop="ChaPingLi" label="差评率" min-width="120" align="right" />
      <el-table-column prop="shoppermoneySum" label="外卖佣金" min-width="120" align="right" />
      <el-table-column prop="riderTip" label="打赏小费" min-width="120" align="right" />
      </el-table>
      <pt-table-loading v-show="isloadingTable" />
      <pt-pagination ref="pagination" :total="tableData.total" @listeningEvent="triggerEvent" />
    </div>
    <delivery-detail @downExlc="downExlc" :date="params.date" ref="deliveryDetail" />
    <el-table v-show="false" :data="ExTableData" :summary-method="getSummaries" show-summary id="out-table" >  <!--不显示的表格下载-->
      <el-table-column prop="agentName" label="区域名称" min-width="160" align="left" />
      <el-table-column prop="shopper" label="配送员姓名" min-width="120" align="left" />
      <el-table-column prop="sortName" label="荣誉等级" min-width="120" align="left" />
      <el-table-column prop="goodstotalSum" label="有效订单" min-width="120" align="right" />
      <!-- <el-table-column prop="shoppermoneySum" label="配送所得金额" min-width="160" align="right" /> -->
      <el-table-column prop="outTimeSum" label="超时完成单" min-width="120" align="right" />
      <el-table-column prop="outTimeLi" label="超时率" min-width="120" align="right" />
      <el-table-column prop="ChaPingDan" label="差评订单" min-width="120" align="right" />
      <el-table-column prop="ChaPingLi" label="差评率" min-width="120" align="right" />
      <el-table-column prop="shopperMoney" label="外卖佣金" min-width="120" align="right" />
      <el-table-column prop="riderTip" label="打赏小费" min-width="120" align="right" />
    </el-table>
  </div>
</template>

<script>
  import FileSaver from 'file-saver'
  import XLSX from 'xlsx'
  import acction from '@/utils/acction.js'
  import { getDay } from '@/utils/ptkc.js'
  import deliveryDetail from './components/deliveryDetail'
  export default {
    components: { deliveryDetail },
    data() {
      return {
        value: '',
        curOrderlist: {}, //修改 选择数据
        options: [],
        params: { //查询数据
          page: 0,
          size: 10,
          agentid: [],
          date: [getDay(-30) + ' ' + '00:00:00', getDay(0) + ' ' + '23:59:59'],
          createtime2: ''
        },
        isloadingTable: false, // 頁面等待
        ExcelLoading: false,
        ExTableData: [], // 表格数据
        tableData: {} // 表单数据
      }
    },
    methods: {
      getAentId(item) { //获取子组件传递的区域
        this.params.agentid = item
      },
      getSummaries(param) { // 表格统计
        const {columns, data} = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总计'
            return
          }
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return new acction(prev,curr).accAdd()
              } else {
                return prev
              }
            }, 0)
            //sums[index] += ' 元';
          } else {
            sums[index] = 'N/A'
          }
        })
        return sums
      },
      exportExcel() { // 导出表格
        this.ExcelLoading = true
        const params = { ...this.params }
        params.createtime1 = params.date?params.date[0] : ''
        params.createtime2 = params.date?params.date[1] : ''
        params.agentid = params.agentid.length > 0 ? params.agentid.join(',') : ''
        params.page = 0
        params.size = this.total
        delete params.date
        this.$http.get('/server/shopper/error?' + this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            this.ExTableData = res.data.data.rows
            setTimeout(() => {
              this.ExcelLoading = false
              var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
              var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: true, type: 'array'})
              try {
                FileSaver.saveAs(new Blob([wbout], {type: 'application/octet-stream'}), `${params.createtime1.slice(0,10)}-${params.createtime2.slice(0,10)}.xls`)
              } catch (e) {
                if (typeof console !== 'undefined') this.ExcelLoading = false
              }
              return wbout
            }, 500)
          }
        }).finally(() => { this.ExcelLoading = false })
      },
      triggerEvent(type, val) { // 分页器
        if (type === 'page') {
          this.params.page = val - 1
        } else if (type === 'size') {
          this.params.page = 0
          this.params.size = val
        }
        this.getTableList()
      },
      downExlc(el, name) {
        const wb = XLSX.utils.table_to_book(el)
        const wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: true, type: 'array'})
        try {
          FileSaver.saveAs(new Blob([wbout], {type: 'application/octet-stream'}), `${name}.xls`)
        } catch (e) {
        
        }
        return wbout
      },
      getTableList() { // 获取订单
        const params = { ...this.params }
        params.createtime1 = params.date ? params.date[0] : ''
        params.createtime2 = params.date ? params.date[1] : ''
        delete params.date
        params.agentid = params.agentid.length > 0 ? params.agentid.join(',') : ''
        this.isloadingTable = true
        this.$http.get('/server/shopper/error?' + this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            this.total = res.data.data.total
            this.tableData = res.data.data
          }
        }).finally(() => { this.isloadingTable = false })
      }
    },
    mounted() {
      this.getTableList()
    }
  }
</script>

<style scoped>
  .header {
    padding: 15px 15px 0 15px;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
  }
</style>
